<!--  -->
<template>
    <div>

        <input id="input">
 
        <div id="container"></div>
        <div id="panel"></div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted, onBeforeMount, onBeforeUnmount } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
import { shanghai } from '../../utils/amapData';
(window as any)._AMapSecurityConfig = {
    securityJsCode: "e6c123ab6f9a8a7813303a9dd334af26", // 应用生成的秘钥
};
const state = reactive<any>({
    map: null,
    placeSearch: null
});

const initMap = async () => {

    const AMap = await AMapLoader.load({
        key: "eb81017ed5673a71c7d34eb1ee4bfc9a", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Driving","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch", "AMap.MassMarks", "AMap.Scale", "AMap.Geolocation", "AMap.HawkEye", "AMap.ControlBar"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).catch((e) => {
        console.log(e);
    });

    //挂载地图
    state.map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [121.045332, 31.19884], // 初始化地图中心点位置
    });

    //缩放工具
    const toolBar = new AMap.ToolBar({
        position: {
            top: '10px',
            right: '10px'
        }
    });
    state.map.addControl(toolBar);

    //比例尺
    const scale = new AMap.Scale();
    state.map.addControl(scale);

    //定位按钮
    let geolocation = new AMap.Geolocation({
        position: {
            top: '350px',
            right: '10px'
        }
    });
    state.map.addControl(geolocation);

    //显示鹰眼
    let overView = new AMap.HawkEye();
    state.map.addControl(overView);

    //工具条方向盘
    let controlBar = new AMap.ControlBar();
    state.map.addControl(controlBar);


    //信息窗口
    // const windContent=`<div class="info-window">
    //         <button class="info-close">X</button>
    //     <div class="info-title">上海交通大学</div>
    //     <div class="info-content">上海交通大学</div>
    //     </div>`;
    let infoWindow = new AMap.InfoWindow({
        // isCustom: true,
        // content: windContent,
        content: "",
        offset: new AMap.Pixel(0, -30),
    });
    // infoWindow.open(state.map, [116.288865, 40.148278]);


    // document.querySelector(".info-close")!.addEventListener("click", () => {
    //     infoWindow.close();
    // });

    //添加点标记
    const content = `<div class="icon">
        <img style="height:30px;widht:26px" src="icon/location.png">
        </div>`;
    let marker = new AMap.Marker({
        position: [116.288865, 40.148278], // 经纬度
        title: "沙河地铁",
        draggable: true,
        content: content,
        offset: new AMap.Pixel(-13, -30),
    });

    marker.on("click", (e: any) => {
        console.log("点击了点标记", e);

    })

    state.map.add(marker);


    //点击地图添加点标记
    state.map.on("click", (e: any) => {
        console.log("点击了地图", e.lnglat.lng, e.lnglat.lat);
        //* 添加点标记 */
        let addMarker = new AMap.Marker({
            position: [e.lnglat.lng, e.lnglat.lat], // 经纬度
            draggable: true,
            content: content,
            offset: new AMap.Pixel(-13, -30),
        });

        state.map.add(addMarker);
 
    
     })

    //海量添加点标记

    const style = {
        url: "//vdata.amap.com/icons/b18/1/2.png", //图标地址
        size: new AMap.Size(50, 50), //图标大小
        anchor: new AMap.Pixel(25, 25), //图标显示位置偏移量，基准点为图标左上角
    };

    const markersData = [
        {
            lnglat: [116.397455, 39.909187],
            name: "天安门",
        },
        {
            lnglat: [116.402394, 39.937182],
            name: "南锣鼓巷",
        },
    ];

    const massMarks = new AMap.MassMarks(markersData, {
        zIndex: 5, //海量点图层叠加的顺序
        zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
        style: style, //设置样式对象
    });

    massMarks.on("click", (e: any) => {

        console.log(e);
        console.log(e.data.lnglat);

        const windContent = `<div class="info-window">
        <button class="info-close">X</button>
        <div class="info-title">${e.data.name}</div>
       </div>`;

        infoWindow.setContent(windContent);

        infoWindow.open(state.map, e.data.lnglat);
        document.querySelector(".info-close")!.addEventListener("click", () => {
            infoWindow.close();
        });



    })

    massMarks.setMap(state.map);

    //多边形

    const polygon = new AMap.Polygon({
  path: shanghai,
  fillColor: '#ccebc5', // 多边形填充颜色
  strokeOpacity: 1, // 线条透明度
  fillOpacity: 0.5, //填充透明度
  strokeColor: '#2b8cbe', // 线条颜色
  strokeWeight: 1, //线条宽度
  strokeStyle: 'dashed', // 线样式
  strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
});

polygon.on('click', (e: any) => {
  console.log(e);
});

//鼠标经过变色
polygon.on('mouseover', () => { // 鼠标移入更改样式
   polygon.setOptions({
     fillOpacity: 0.7,
     fillColor: '#ff0000'
   })
 })
polygon.on('mouseout', () => { // 鼠标移出恢复样式
  polygon.setOptions({
    fillOpacity: 0.5,
    fillColor: '#ccebc5'
  })
})



// state.map.add(polygon);


//地点搜索
// state.placeSearch = new AMap.PlaceSearch({
//       pageSize: 5, // 单页显示结果条数
//       pageIndex: 1, // 页码
//       city: "上海市", // 兴趣点城市
//       citylimit: true, //是否强制限制在设置的城市内搜索
//       map: state.map, // 展现结果的地图实例
//       panel: "panel", // 结果列表将在此容器中进行展示。 panel为div id
//       autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
//     });


//     state.placeSearch.search("大学");

    //POI搜索
    let autoOptions = {
      // 城市，默认全国
      city: "上海",
      // 使用联想输入的input的id
      input: "input",
    };
   const autoComplete=  new AMap.AutoComplete(autoOptions);

   autoComplete.on("select", (e: any) => { 

    console.log("选择",e.poi.name);

    state.placeSearch = new AMap.PlaceSearch({
      pageSize: 5, // 单页显示结果条数
      pageIndex: 1, // 页码
      city: "上海市", // 兴趣点城市
      citylimit: true, //是否强制限制在设置的城市内搜索
      map: state.map, // 展现结果的地图实例
      panel: "panel", // 结果列表将在此容器中进行展示。 panel为div id
      autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    });


    state.placeSearch.search(e.poi.name);

    
   });
   //路线规划
   var driving = new AMap.Driving({
        map: state.map,
        panel: "panel"
    }); 
    driving.search([
        {keyword: '南京路步行街',city:'上海'},
        {keyword: '复旦大学',city:'上海'},
        {keyword: '虹桥机场',city:'上海'}
    ], (status: any, result: any) => { 
    });


}

onMounted(() => {
    initMap();
})

onBeforeUnmount(() => {
    state.map && state.map.destroy();
})


</script>
<style>
#container {
    width: 100%;
    height: 100vh;
    background-color: skyblue;
}

.info-window {
    width: 300px;
    height: auto;
    padding: 30px;
    background-color: skyblue;
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
  z-index: 9999;
}
</style>